<template>
  <div>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>文章列表</span>
        </div>

        <div class="search-box">
            <el-form :inline="true" :model="q">
                <el-form-item label="文章分类">
                    <el-select v-model="q.cate_id" placeholder="请选择分类" size="small">
                        <el-option v-for="item in cateList" :key="item.id" :label="item.cate_name" :value="item.cate_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发布状态" style="margin-left: 15px;">
                    <el-select v-model="q.state" placeholder="请选择状态" size="small">
                        <el-option label="已发布" value="已发布"></el-option>
                        <el-option  label="草稿" value="草稿"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small">筛选</el-button>
                    <el-button type="info" size="small">重置</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" size="small" class="btn-pub" @click="showPubDialogFn">发表文章</el-button>
        </div>
    </el-card>
    <el-dialog
    title="发表文章"
    :visible.sync="pubDialogVisible"
    fullscreen
    :before-close="handleClose">
    <el-form :model="pubForm" :rules="pubFormRules" ref="pubFormRef" label-width="100px">
        <el-form-item label="文章标题" prop="title">
            <el-input v-model="pubForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="文章分类" prop="cate_id">
            <el-select v-model="pubForm.cate_id" placeholder="请选择分类" style="width: 100%;">
                <el-option :label="obj.cate_name" :value="obj.cate_id" v-for="obj in cateList" :key="obj.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
            <quill-editor v-model="pubForm.content"></quill-editor>
        </el-form-item>
        <el-form-item label="文章封面">
          <img
            src="../../assets/logo.png"
            alt=""
            class="cover-img"
            ref="imgRef"
            @change="changeCoverFn"
          />
          <br />
          <input type="file"
          style="display: none;"
          accept="image/*"
          ref="iptFileRef"
          />
          <el-button type="text" @click="selCoverFn">+ 选择封面</el-button>
        </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getArtCateListAPI } from '@/api'
import imgObj from '../../assets/logo.png'
export default {
  data () {
    return {
      q: {
        cate_id: '',
        state: ''
      },
      pubForm: {
        title: '',
        cate_id: '',
        content: '',
        cover_img: ''
      },
      pubFormRules: {
        title: [
          {
            required: true,
            message: '请输入文章标题',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 30,
            message: '文章标题的长度为1-30个字符',
            trigger: 'blur'
          }
        ],
        cate_id: [
          {
            required: true,
            message: '请选择文章标题',
            trigger: 'blur'
          }
        ],
        content: [
          {
            required: true,
            message: '请输入文章内容',
            trigger: 'blur'
          }
        ]
      },
      pubDialogVisible: false,
      cateList: []// 保存文章分类列表
    }
  },
  created () {
    // 请求分类数据
    this.getCateListFn()
  },
  methods: {
    showPubDialogFn () {
      this.pubDialogVisible = true
    },
    async handleClose (done) {
      // 询问用户是否确认关闭对话框
      const congirmResult = await this.$confirm('此操作将导致文章信息丢失,是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // $confirm内部虽然是一个确认提示框，但是它借用了Promise语法来管理，点击确定它的状态为兑现成功状态
      //   返回'confirm',如果用户点击了取消按钮，此Promise对象状态为拒绝状态，返回'cancel'字符串
      //   知识回顾
      // 1、await只能用在被async修饰的函数内
      //   async修饰:就是当前函数名左边加async关键字，如果没有函数名，在形参的左边加async
      // 原因：async修饰的函数就是异步函数，所以外面的同步代码继续执行，而await暂停代码只能暂停async
      //   函数内的，等待await后面异步结果
      //   2、await只能拿到成功的结果并放行往下走，如果失败内部会向浏览器控制台抛出错误并
      //   不会让await往下走代码
      //   3、await后面的Promise的对象的拒绝状态（错误）如何捕获呢？
      //   方法1::try{} catch(err){}
      //   方式2：用Promise的链式调用，而且在catch里return的非Promise拒绝状态的对象值，都会当做
      //   成功的结果返回给原地新的Promise对象结果

      // 取消关闭-阻止住，什么都不干
      if (congirmResult === 'cancel') return
      // 确认关闭
      done()
    },
    // 获取所有分类
    async getCateListFn () {
      const { data: res } = await getArtCateListAPI()
      this.cateList = res.data
    },
    // 选择封面点击事件->让文件选择窗口出现
    selCoverFn () {
      this.$refs.iptFileRef.click() // 用JS来模拟一次点击事件动作
    },
    changeCoverFn (e) {
      // e.target拿到触发事件的那个标签（input标签本身）
      // e.target.files 拿到选择的文件数组
      const files = e.target.files
      console.log(files)
      if (files.length === 0) {
        this.pubForm.cover_img = null
        this.$refs.imgRef.setAttribute('src', imgObj)
      } else {
        this.pubForm.cover_img = files[0]
        // 图片显示
        const url = URL.createObjectURL(files[0])
        console.log(url)
        this.$refs.imgRef.setAttribute('src', url)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search-box{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .btn-pub{
        margin-top:5px;
    }
}
//scoped不会给组件内的标签添加date-v属性，所以你要用::v-deep穿透选择组件内的标签设置样式
::v-deep .ql-editor{
    min-height: 300px;
}

.cover-img{
  width: 400px;
  height: 280px;
  object-fit: cover;
}
</style>
